<template>
  <top-item title="今日交易用户数" :value="numberFormat(orderUser)">
    <template #default>
      <div id="trade"></div>
    </template>
    <template #footer>
      <div class="footer">
        退货率 <span>{{ returnRate }}%</span>
      </div>
    </template>
  </top-item>
</template>

<script setup lang="ts">
import { onMounted, watch, computed } from 'vue'
import topItem from './top-item.vue'
import * as echarts from 'echarts'
import { useReportInfoData } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const { numberFormat, moneyFormat } = useFormat()
const reportInfoDataStore = useReportInfoData()
let tradeChart: any
watch(() => reportInfoDataStore.reportData, () => {
  tradeChart?.setOption({
    xAxis: {
      type: 'category',
      data: orderUserTrendAxis.value,
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    tooltip: {
      trigger: 'axis',
      position: function (point: any, params: any, dom: any, rect: any, size: any) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        let x = 0; // x坐标位置
        // 当前鼠标位置
        let pointX = point[0];
        // 提示框大小
        let boxWidth = size.contentSize[0];
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else { // 左边放的下
          x = pointX - boxWidth;
        }

        return [x, -40];
      },
      confine: true, // 限制tooltip 的边界
    },
    series: [
      {
        name: '实时交易量',
        data: orderUserTrend.value,
        type: 'bar'
      }
    ]
  })
})

onMounted(() => {
  tradeChart = echarts.init(document.querySelector('#trade') as HTMLElement)

  window.addEventListener('resize', () => {
    tradeChart?.resize()
  })
})

const orderUser = computed(() => reportInfoDataStore.reportData.orderUser)
const returnRate = computed(() => reportInfoDataStore.reportData.returnRate)
const orderUserTrend = computed(() => reportInfoDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(() => reportInfoDataStore.reportData.orderUserTrendAxis)

</script>

<style scoped>

</style>